/*
 * @Author: YuanSong
 * @Date: 2021-11-25 17:00:24
 * @Last Modified by: YuanSong
 * @Last Modified time: 2021-12-03 20:44:11
 */
import React from "react";
import { IGlobalReduceState } from "@/redux/reducers/global";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { AppState } from "@/redux/reducers";
import store from "store";
import { THEMES } from "@/store/constants";
import { requestModifyUserInfo } from "@redux/actions/user";
import { message } from "../Message";

type IProps = IGlobalReduceState & {
  requestModifyUserInfo: typeof requestModifyUserInfo;
};
class ThemeSelector extends React.Component<IProps> {
  constructor(props: any) {
    super(props);
    this.changeTheme = this.changeTheme.bind(this);
    this.foldThemeSelector = this.foldThemeSelector.bind(this);
    this.unfoldThemeSelector = this.unfoldThemeSelector.bind(this);
    this.tranColor = this.tranColor.bind(this);
  }
  readonly state = {
    isFold: true,
  };
  tranColor(title: string, value: string) {
    document.getElementsByTagName("body")[0].style.setProperty(title, value);
  }

  changeTheme(theme: any) {
    //只有在登录状态下才可以改变主题，
    if (!this.props.userInfo || !this.props.userInfo.phoneNo){
        message({content:'请先登录再尝试切换主题',type:'success'});
    }
    let param = {
      theme: theme,
      phoneNo: this.props.userInfo?.phoneNo,
    };
    if (param.phoneNo) {
      this.props.requestModifyUserInfo(param, () => {
        document.getElementsByClassName("App")[0].className = "App " + theme;
        //改变主题颜色
        let themeGather = store.get(THEMES);
        this.tranColor("--foreground-color", themeGather[theme].foregroundColor);
        this.tranColor("--span-color", themeGather[theme].spanColor);
        this.tranColor("--sub-span-color", themeGather[theme].subSpanColor);
        this.tranColor("--background-color", themeGather[theme].backgroundColor);
        this.tranColor(
          "--button-background-color",
          themeGather[theme].buttonBackgroundColor
        );
        this.tranColor(
          "--button-hover-background-color",
          themeGather[theme].buttonHoverBackgroundColor
        );
        this.tranColor("--button-color", themeGather[theme].buttonColor);
        this.tranColor("--border-color", themeGather[theme].borderColor);
        this.tranColor(
          "--matted-span-color",
          themeGather[theme].mattedSpanColor
        );
        this.tranColor(
          "--navigation-background-color",
          themeGather[theme].navigationBackgroundColor
        );
        this.tranColor(
          "--navigation-active-background-color",
          themeGather[theme].navigationActiveBackgroundColor
        );
        this.tranColor(
          "--navigation-hover-background-color",
          themeGather[theme].navigationHoverBackgroundColor
        );
      });
    }
  }
  foldThemeSelector() {
    this.setState({ isFold: true });
    if (this.myThemeSelector.current) {
      this.myThemeSelector.current.style.width = "20px";
    }
  }
  unfoldThemeSelector() {
    this.setState({ isFold: false });

    if (this.myThemeSelector.current) {
      this.myThemeSelector.current.style.width = "142px";
    }
  }
  private myThemeSelector = React.createRef<HTMLDivElement>();

  render() {
    const themeGather = store.get(THEMES);
    let themeArr = [...Object.keys(themeGather)];
    const currentTheme = this.props.userInfo
      ? this.props.userInfo.theme
      : "light";
    return (
      <div className="ThemeSelector-Wrapper">
        <div className="ThemeItemContainer" ref={this.myThemeSelector}>
          <div
            className="ThemeItem-outter"
            style={{ backgroundColor: themeGather[currentTheme].foregroundColor }}
          >
            <div
              className="ThemeItem-inner"
              style={{ backgroundColor: themeGather[currentTheme].backgroundColor }}
            ></div>
          </div>

          {!this.state.isFold &&
            themeArr.map((item: any, index: number) => (
              <div
                className="ThemeItem"
                key={item + index}
                style={{ backgroundColor: themeGather[item].foregroundColor }}
                onClick={() => this.changeTheme(item)}
              ></div>
            ))}
        </div>

        {this.state.isFold && (
          <div
            className="FoldButton"
            onClick={this.unfoldThemeSelector}
          ></div>
        )}

        {!this.state.isFold && (
          <div className="UnfoldButton" onClick={this.foldThemeSelector}>
            {" "}
          </div>
        )}
      </div>
    );
  }
}
interface TypeOfState {
  // ...
  global: IGlobalReduceState;
}

interface TypeOfDispatch {
  // ...
}
export default connect(
  (state: AppState) => state.global,
  (dispatch) => {
    bindActionCreators(
      {
        requestModifyUserInfo,
      },
      dispatch
    );
  }
)(ThemeSelector);
